<template>
  <div class="container" style="background: rgba(221, 221, 221);min-height:100vh;">
    <div class="titleBackground">
      <div class="titleName">
        <div class="whiteCard" v-if="userInfo">
          <div class="leftImg">
            <div class="imageCircle">
              <img class="image" :src="userInfo.avatar" />
            </div>
          </div>
          <div class="text">
            <p class="topName">
              <span style="font-weight:bold">{{userInfo.realName}}</span>
              <!-- <img style="width:15px;height:15px;position:relative;top:-4px;left:10px" :src="require('../../assets/image/huiyuan.png')" alt=""> -->
            </p>
            <!-- <p class="intermediateText">用户名:{{userInfo.phone}}</p> -->
            <!-- <p class="bottomText">
              <img style="width:18px;height:14px" :src="require('../../assets/image/huiyuan.png')" alt />
              <span style="padding:0 6px">会员</span>
            </p>-->
          </div>
          <div class="rightModule" style="color:#666;font-size:14px;">
            <p>
              等级:
              <span>{{cRank}}</span>
            </p>
            <p>
              推广等级:
              <span>{{uRank}}</span>
            </p>
            <p>
              旗下购酒总数:
              <span>{{userInfo.termTotal}}</span>
            </p>
            <p>
              股票数量:
              <span>{{userInfo.stock}}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="tables">
      <van-tabs
        style="border-radius:10px;border:1px solid #ccc;overflow:hidden"
        :line-width="0"
        :swipe-threshold="5"
        title-active-color="#212121"
        v-model="active"
      >
        <van-tab class="tablesTitle">
          <div slot="title" style="padding:10px 0;display:flex;flex-direction:column">
            <img
              style="width: 33px;height: 34px;padding: 0;margin: 0 auto;"
              :src="require('../../assets/image/shezhi.png')"
            />
            <span class="tablesTitleText">设置</span>
          </div>
          <van-grid>
            <van-grid-item
              class="gridItem"
              v-for="item in settings"
              :key="item.name"
              @click="jump(item.path)"
            >
              <van-image v-if="item.image" :src="item.image" />
              <p>{{item.name}}</p>
            </van-grid-item>
          </van-grid>
        </van-tab>
        <van-tab class="tablesTitle">
          <div slot="title" style="padding:10px 0;display:flex;flex-direction:column" @click="()=>{$router.push('/canversationMain')}">
            <img
              style="width: 33px;height: 34px;margin: 0 auto;"
              :src="require('../../assets/image/huihua.png')"
              alt
            />
            <span class="tablesTitleText">会话</span>
          </div>
          <div>
            <!-- <van-popup v-model="show" position="top" :style="{ height: '30%' }" /> -->
            <!-- <infomationPage /> -->
          </div>
        </van-tab>
        <van-tab class="tablesTitle">
          <div slot="title" style="padding:10px 0;display:flex;flex-direction:column">
            <img
              style="width: 33px;height: 34px;margin: 0 auto;"
              :src="require('../../assets/image/shanghui.png')"
              alt
            />
            <span class="tablesTitleText">商会</span>
          </div>
          <van-grid>
            <van-grid-item  class="gridItem" v-for="item in ChamberCommerce" :key="item.name" @click="jump(item.path)">
              <van-image v-if="item.image" :src="item.image" />
              <p>{{item.name}}</p>
            </van-grid-item>
          </van-grid>
        </van-tab>
        <van-tab class="tablesTitle">
          <div slot="title" style="padding:10px 0;display:flex;flex-direction:column">
            <img
              style="width: 33px;height: 34px;margin: 0 auto;"
              :src="require('../../assets/image/kongjian.png')"
              alt
            />
            <span class="tablesTitleText">空间</span>
          </div>
          <van-grid>
            <van-grid-item
              class="gridItem"
              @click="jump(item.path)"
              v-for="item in space"
              :key="item.name"
            >
              <van-image v-if="item.image" :src="item.image" />
              <p>{{item.name}}</p>
            </van-grid-item>
          </van-grid>
        </van-tab>
        <van-tab class="tablesTitle">
          <div slot="title" style="padding:10px 0;display:flex;flex-direction:column">
            <img
              style="width: 33px;height: 34px;margin: 0 auto;"
              :src="require('../../assets/image/kehu.png')"
              alt
            />
            <span class="tablesTitleText">客服</span>
          </div>
          <div>
            <p style="margin:0;padding:10px 0;text-align:center">QQ:1300000000000</p>
          </div>
          <!-- <van-grid>
            <van-grid-item class="gridItem" v-for="item in settings" :key="item.name">
              <van-image v-if="item.image" :src="item.image" />
              <p>{{item.name}}</p>
            </van-grid-item>
          </van-grid>-->
        </van-tab>
      </van-tabs>
    </div>
    <van-popup v-model="shows" :overlay="false" style="height:68%;width:98%;" position="bottom">
      <div style="padding:10px">
        <div>
          <span style="font-size:12px">请完善个人基本资料【带*号为必填项】</span>
          <div style="font-size:13px;position:absolute;right:0;top:10px">
            <van-button
              style="height:25px;line-height:25px;border-radius:10px;background:#2494C6;color:#fff"
            >点击修改</van-button>
            <van-button
              style="height:25px;line-height:25px;border-radius:10px;background:#2494C6;color:#fff"
            >隐藏</van-button>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
// import infomationPage from "@/components/conversation/main.vue";
export default {
  data: () => ({
    shows: false,
    active: 0,
    show:true,
    settings: [
      {
        image: require("../../assets/image/setting/个人资料.png"),
        name: "个人资料",
        path: "/userInfo"
      },
      {
        image: require("../../assets/image/setting/我的钱包.png"),
        name: "我的钱包"
      },
      {
        image: require("../../assets/image/setting/关注店铺.png"),
        name: "关注店铺"
      },
      {
        image: require("../../assets/image/setting/浏览记录.png"),
        name: "浏览记录"
      },
      {
        image: require("../../assets/image/setting/我的分享.png"),
        name: "我的分享"
      },
      {
        image: require("../../assets/image/setting/收藏商品.png"),
        name: "收藏商品"
      },
      {
        image: require("../../assets/image/setting/收藏商品.png"),
        name: "银行卡",
        path: "/bankCard"
      },
      {},
      {},
      {},
      {},
      {}
    ],
    ChamberCommerce: [
      {
        image: require("../../assets/商会/资源共享.png"),
        name: "资源共享",
        path:"/resourceSharing"
      },
      {
        image: require("../../assets/商会/商城购物.png"),
        name: "商城购物"
      },
      {
        image: require("../../assets/商会/酒店旅游.png"),
        name: "酒店旅游"
      },
      {
        image: require("../../assets/商会/招聘求职.png"),
        name: "招聘求职"
      },
      {
        image: require("../../assets/商会/技能服务.png"),
        name: "技能服务"
      },
      {
        image: require("../../assets/商会/种稙养殖.png"),
        name: "种植养殖"
      },
      {},
      {},
      {},
      {},
      {},
      {}
    ],
    space: [
      {
        image: require("../../assets/空间/中华族谱.png"),
        name: "中华族谱",
        path: "/course"
      },
      {
        image: require("../../assets/空间/信息发布.png"),
        name: "信息发布",
        path: ""
      },
      {
        image: require("../../assets/空间/我要开店.png"),
        name: "我要开店",
        path: "/shop"
      },
      {
        image: require("../../assets/空间/我要挂卖.png"),
        name: "我要挂卖",
        path: ""
      },
      {
        image: require("../../assets/空间/健康记录.png"),
        name: "健康记录",
        path: ""
      },
      {
        image: require("../../assets/空间/人生历程.png"),
        name: "人生历程",
        path: ""
      },
      {
        image: require("../../assets/空间/设  置.png"),
        name: "设置",
        path: ""
      },
      {},
      {},
      {},
      {},
      {}
    ]
  }),
  components: {
    // infomationPage
  },
  computed: {
    userInfo() {
      return JSON.parse(this.$store.state.memberInfo);
    },
    token() {
      return JSON.parse(this.$store.state.userInfo);
    },
    cRank() {
      let c = null;
      switch (this.userInfo.cRank) {
        case 0:
          c = "无等级";
          break;
        case 1:
          c = "体验馆";
          break;
        case 2:
          c = "品鉴馆";
          break;
        case 3:
          c = "销售中心";
          break;
        case 4:
          c = "仓储配送中心";
          break;
      }
      return c;
    },
    uRank() {
      let c = null;
      switch (this.userInfo.uRank) {
        case 0:
          c = "品牌推广商";
          break;
        case 1:
          c = "销售员";
          break;
        case 2:
          c = "品牌推广商";
          break;
        case 3:
          c = "推广经理";
          break;
        case 4:
          c = "市场总监";
          break;
      }
      return c;
    }
  },
  created() {
    console.log(this.userInfo);
    if (!this.userInfo) {
      this.$Toast({
        message: "请先登录!",
        duration: 1000,
        forbidClick: true
      });
      setTimeout(() => {
        this.$router.push("/login");
      }, 1000);
    } else {
      return false;
    }
  },
  mounted() {
    if (!this.token) {
      this.$router.push("/login");
    }
  },
  methods: {
    jump(path) {
      if (path) {
        this.$router.push(path);
      } else {
        return false;
      }
    }
  }
};
</script>
<style lang='scss'>
@import "../../assets/css/mine.scss";
</style>